<script lang="ts" setup>
/**
 * 模态对话框组件
 * title 标题
 * v-model:visible 显示控制
 * @closeModal 关闭对话框回调
 * @submitModal 确定提交回调（异步方法传入promise）
 */
interface Props {
  visible: boolean
  title?: string
  leftButton?: boolean
  rightButton?: boolean
}
const props = withDefaults(defineProps<Props>(), {
  visible: false,
  title: '对话框',
  leftButton: true,
  rightButton: true,
})
const emit = defineEmits(['update:visible', 'closeModal'])

const { visible, title } = toRefs(props)

const show = computed({
  get() {
    return visible.value
  },
  set(val) {
    emit('update:visible', val)
  },
})

// 弹窗取消
function closeModal() {
  show.value = false
  emit('closeModal')
}
</script>

<template>
  <n-modal v-model:show="show" class="Cdialog" :on-after-leave="closeModal">
    <n-card
      style="width: 600px"
      :bordered="false"
      size="huge"
      role="dialog"
      aria-modal="true"
    >
      <template #header>
        <n-ellipsis :line-clamp="1">
          {{ title }}
        </n-ellipsis>
      </template>
      <template #header-extra>
        <n-icon cursor-pointer size="26" @click="closeModal">
          <icon-mdi:close-box />
        </n-icon>
      </template>
      <slot />
      <template #footer>
        <slot name="footer" />
        <!-- <div v-if="leftButton || rightButton" f-c-c>
          <n-button v-if="leftButton" mr-5 b-rd-5 size="medium" @click="closeModal">
            <n-icon cursor-pointer size="16">
              <icon-mdi:cancel />
            </n-icon>
            <span ml-2>取 消</span>
          </n-button>
          <n-button v-if="rightButton" ml-5 b-rd-5 type="primary" size="medium" @click="$attrs.onSubmitModal">
            <n-icon cursor-pointer size="16">
              <icon-mdi:checkbox-marked-circle-outline />
            </n-icon>
            <span ml-2>确 定</span>
          </n-button>
        </div> -->
      </template>
    </n-card>
  </n-modal>
</template>

<style lang="scss" scoped>
.Cdialog{
  border-radius: 10px;
    :deep(.n-card-header) {
      padding: 20px 20px;
    }
    :deep(.n-card-header__main) {
      font-size: 17px;
      font-weight: 700;
      display: flex;
      align-items: center;
    }
    :deep(.n-card__content) {
      padding: 0 20px 20px 20px;
    }
    :deep(.n-card__footer) {
      padding: 0 20px 10px 20px;
    }
}
</style>
